
<!DOCTYPE html>
<html lang="zh-Hans" class="loading">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>layui完美分页，ajax请求分页（真分页） 【2.0版本】 - Luis Blog</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="google" content="notranslate" />
    <meta name="keywords" content="Luis,"> 
    <meta name="description" content="java开发工程师，喜欢代码，喜欢技术,
注意使用的layui版本为：layui-v2.0以上版本，如果v1.0版本请看我另外一篇博客  《layui完美分页，ajax请求分页（真分页）》


最近因为以为学者在看了我上一篇关于layui,"> 
    <meta name="author" content="winter chen"> 
    <link rel="alternative" href="atom.xml" title="Luis Blog" type="application/atom+xml"> 
    <link rel="icon" href="/img/favicon.png"> 
    
    
<link rel="stylesheet" href="/css/diaspora.css">

	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({
              google_ad_client: "ca-pub-8691406134231910",
              enable_page_level_ads: true
         });
    </script>
    <script async custom-element="amp-auto-ads"
        src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
    </script>
<meta name="generator" content="Hexo 4.2.0"></head>

<body class="loading">
    <span id="config-title" style="display:none">Luis Blog</span>
    <div id="loader"></div>
    <div id="single">
    <div id="top" style="display: block;">
    <div class="bar" style="width: 0;"></div>
    <a class="iconfont icon-home image-icon" href="javascript:;" data-url="https://blog.winterchen.com"></a>
    <div title="播放/暂停" class="iconfont icon-play"></div>
    <h3 class="subtitle">layui完美分页，ajax请求分页（真分页） 【2.0版本】</h3>
    <div class="social">
        <div>
            <div class="share">
                <a title="获取二维码" class="iconfont icon-scan" href="javascript:;"></a>
            </div>
            <div id="qr"></div>
        </div>
    </div>
    <div class="scrollbar"></div>
</div>

    <div class="section">
        <div class="article">
    <div class='main'>
        <h1 class="title">layui完美分页，ajax请求分页（真分页） 【2.0版本】</h1>
        <div class="stuff">
            <span>十月 25, 2017</span>
            
  <ul class="post-tags-list" itemprop="keywords"><li class="post-tags-list-item"><a class="post-tags-list-link" href="/tags/layui/" rel="tag">layui</a></li></ul>


        </div>
        <div class="content markdown">
            <p><img src="http://img.winterchen.com/ariel-besagar-497027-unsplash.jpg" alt=""></p>
<h3 id="注意"><a href="#注意" class="headerlink" title="注意"></a>注意</h3><p><strong>使用的layui版本为：layui-v2.0以上版本，如果v1.0版本请看我另外一篇博客 <a href="https://winterchens.github.io/2017/10/25/layui-page-1.0/" target="_blank" rel="noopener"> 《layui完美分页，ajax请求分页（真分页）》</a></strong></p>
<a id="more"></a>

<p>最近因为以为学者在看了我上一篇关于layui分页的博客遇到了问题，原因是因为使用了新版本2.x，导致有一些属性改变了，所以出了这篇新版本的博客，本文是根据上一篇博客改变而成，如有疑问请联系我 email：<a href="mailto:1085143002@qq.com">1085143002@qq.com</a></p>
<h3 id="完整代码："><a href="#完整代码：" class="headerlink" title="完整代码："></a>完整代码：</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">%@</span> <span class="attr">page</span> <span class="attr">language</span>=<span class="string">"java"</span> <span class="attr">contentType</span>=<span class="string">"text/html; charset=UTF-8"</span> <span class="attr">pageEncoding</span>=<span class="string">"UTF-8"</span>%&gt;</span></span><br><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"renderer"</span> <span class="attr">content</span>=<span class="string">"webkit"</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge,chrome=1"</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1, maximum-scale=1"</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"apple-mobile-web-app-status-bar-style"</span> <span class="attr">content</span>=<span class="string">"black"</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"apple-mobile-web-app-capable"</span> <span class="attr">content</span>=<span class="string">"yes"</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"format-detection"</span> <span class="attr">content</span>=<span class="string">"telephone=no"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span>  <span class="attr">rel</span>=<span class="string">"icon"</span> <span class="attr">href</span>=<span class="string">"static/images/titleLogo.png"</span>  /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>门店管理后台<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"static/layui/plugins/layui/css/layui.css"</span> <span class="attr">media</span>=<span class="string">"all"</span> /&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- &lt;link rel="stylesheet" type="text/css" href="static/css/reset.css"&gt;</span></span><br><span class="line"><span class="comment">    &lt;link rel="stylesheet" type="text/css" href="static/css/commend.css"&gt; --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- &lt;link rel="stylesheet" href="static/css/jqpagination.css" /&gt; --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- &lt;link rel="stylesheet" type="text/css" href="static/css/shopCustomerManager.css"&gt; --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"static/js/jquery-3.1.1.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"static/layui/plugins/layui/layui.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- &lt;script type="text/javascript" src="static/js/jquery.jqpagination.js"&gt;&lt;/script&gt; --&gt;</span></span><br><span class="line">   	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="javascript">	   	$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="actionscript">	   		  <span class="comment">//ajax请求后台数据</span></span></span><br><span class="line">		      getShopCustomerManagePageInfo();</span><br><span class="line">		      </span><br><span class="line">		</span><br><span class="line"><span class="actionscript">	   		  <span class="comment">//点击搜索时 搜索数据</span></span></span><br><span class="line"><span class="javascript">	   		  $(<span class="string">"#selectButton"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; </span></span><br><span class="line">	   			getShopCustomerManagePageInfo();</span><br><span class="line"><span class="actionscript">	   			currentPageAllAppoint = <span class="number">1</span>; <span class="comment">//当点击搜索的时候，应该回到第一页</span></span></span><br><span class="line"><span class="actionscript">	   			toPage();<span class="comment">//然后进行分页的初始化</span></span></span><br><span class="line">	   			</span><br><span class="line">	   	      &#125;)</span><br><span class="line">	   	   toPage();</span><br><span class="line">	   	&#125;);</span><br><span class="line">	   	</span><br><span class="line"><span class="actionscript">	  	<span class="comment">//分页参数设置 这些全局变量关系到分页的功能</span></span></span><br><span class="line"><span class="actionscript">	   	<span class="keyword">var</span> startAllAppoint = <span class="number">0</span>;<span class="comment">//开始页数</span></span></span><br><span class="line"><span class="actionscript">	   	<span class="keyword">var</span> limitAllAppoint = <span class="number">10</span>;<span class="comment">//每页显示数据条数</span></span></span><br><span class="line"><span class="actionscript">	   	<span class="keyword">var</span> currentPageAllAppoint = <span class="number">1</span>;<span class="comment">//当前页数</span></span></span><br><span class="line"><span class="actionscript">	   	<span class="keyword">var</span> dataLength = <span class="number">0</span>;<span class="comment">//数据总条数</span></span></span><br><span class="line"><span class="actionscript">	   	<span class="comment">//ajax请求后台数据</span></span></span><br><span class="line"><span class="actionscript">	   	<span class="function"><span class="keyword">function</span> <span class="title">getShopCustomerManagePageInfo</span><span class="params">()</span></span>&#123;</span></span><br><span class="line"><span class="javascript">	   		$.ajax(&#123;</span></span><br><span class="line"><span class="actionscript">	   			type:<span class="string">"post"</span>,</span></span><br><span class="line"><span class="javascript">	   			<span class="keyword">async</span>:<span class="literal">false</span>,</span></span><br><span class="line"><span class="actionscript">	   			url:<span class="string">"list_shop_customers_info"</span>,</span></span><br><span class="line"><span class="javascript">	   			data:&#123;<span class="attr">start</span>:startAllAppoint, <span class="attr">limit</span>:limitAllAppoint,<span class="attr">selectValue</span>:$(<span class="string">"#selectValue"</span>).val()&#125;,</span></span><br><span class="line"><span class="actionscript">	   			success:<span class="function"><span class="keyword">function</span><span class="params">(data,status)</span></span>&#123;</span></span><br><span class="line"><span class="javascript">	   				data=<span class="built_in">eval</span>(<span class="string">"("</span>+data+<span class="string">")"</span>);</span></span><br><span class="line">	   				getShopCustomesInfo(data.root);</span><br><span class="line"><span class="actionscript">	   				startAllAppoint = data.currentResult;<span class="comment">//当前页数(后台返回)</span></span></span><br><span class="line"><span class="actionscript">	   				dataLength  = data.total;<span class="comment">//数据总条数</span></span></span><br><span class="line">	   			&#125;</span><br><span class="line">	   		&#125;);</span><br><span class="line">	   		</span><br><span class="line">	   	&#125;</span><br><span class="line">	   	</span><br><span class="line">	   </span><br><span class="line">	   	</span><br><span class="line"><span class="actionscript">	   	<span class="function"><span class="keyword">function</span> <span class="title">getShopCustomesInfo</span><span class="params">(data)</span></span>&#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">	   		var s = "<span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">th</span>&gt;</span>姓名<span class="tag">&lt;/<span class="name">th</span>&gt;</span><span class="tag">&lt;<span class="name">th</span>&gt;</span>性别<span class="tag">&lt;/<span class="name">th</span>&gt;</span><span class="tag">&lt;<span class="name">th</span>&gt;</span>电话<span class="tag">&lt;/<span class="name">th</span>&gt;</span><span class="tag">&lt;<span class="name">th</span>&gt;</span>备案楼盘<span class="tag">&lt;/<span class="name">th</span>&gt;</span><span class="tag">&lt;<span class="name">th</span>&gt;</span>已成交<span class="tag">&lt;/<span class="name">th</span>&gt;</span><span class="tag">&lt;<span class="name">th</span>&gt;</span>归属经纪人<span class="tag">&lt;/<span class="name">th</span>&gt;</span><span class="tag">&lt;<span class="name">th</span>&gt;</span>添加时间<span class="tag">&lt;/<span class="name">th</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span>";</span></span></span><br><span class="line"><span class="javascript">	   		$.each(data,<span class="function"><span class="keyword">function</span>(<span class="params">v,o</span>)</span>&#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">	   				s+='<span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>'+o.cusName+'<span class="tag">&lt;/<span class="name">td</span>&gt;</span>';</span></span></span><br><span class="line"><span class="actionscript">	   				s+=<span class="string">'&lt;td&gt;'</span>+o.cusSex+<span class="string">'&lt;/td&gt;'</span>;</span></span><br><span class="line"><span class="actionscript">	   				s+=<span class="string">'&lt;td&gt;'</span>+o.phone+<span class="string">'&lt;/td&gt;'</span>;</span></span><br><span class="line"><span class="actionscript">	   				s+=<span class="string">'&lt;td&gt;'</span>+o.records+<span class="string">'&lt;/td&gt;'</span>;</span></span><br><span class="line"><span class="actionscript">	   				s+=<span class="string">'&lt;td&gt;'</span>+o.alreadyDeal+<span class="string">'&lt;/td&gt;'</span>;</span></span><br><span class="line"><span class="actionscript">	   				s+=<span class="string">'&lt;td&gt;'</span>+o.theMedi+<span class="string">'&lt;/td&gt;'</span>;</span></span><br><span class="line"><span class="handlebars"><span class="xml">	   				s+='<span class="tag">&lt;<span class="name">td</span>&gt;</span>'+o.addTime+'<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span>';</span></span></span><br><span class="line">	   		&#125;);</span><br><span class="line"></span><br><span class="line"><span class="actionscript">	   		<span class="keyword">if</span>(data.length&gt;<span class="number">0</span>)&#123;</span></span><br><span class="line"><span class="javascript">	   			$(<span class="string">"#t_customerInfo"</span>).html(s);</span></span><br><span class="line"><span class="actionscript">	   		&#125;<span class="keyword">else</span>&#123;</span></span><br><span class="line"><span class="javascript">	   			$(<span class="string">"#page1"</span>).hide();</span></span><br><span class="line"><span class="handlebars"><span class="xml">	   			$("#t_customerInfo").html("<span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">'width:10%;height:30px;display:block;margin:0 auto;'</span>&gt;</span>暂无数据<span class="tag">&lt;/<span class="name">span</span>&gt;</span>");</span></span></span><br><span class="line">	   		&#125;</span><br><span class="line">	   		</span><br><span class="line">	   		</span><br><span class="line">	   	&#125;</span><br><span class="line">   		</span><br><span class="line">	   	</span><br><span class="line">	   	</span><br><span class="line"><span class="actionscript">	   	<span class="function"><span class="keyword">function</span> <span class="title">toPage</span><span class="params">()</span></span>&#123;</span></span><br><span class="line">	   		</span><br><span class="line"><span class="actionscript">	   		layui.use([<span class="string">'form'</span>, <span class="string">'laypage'</span>, <span class="string">'layedit'</span>,<span class="string">'layer'</span>, <span class="string">'laydate'</span>], <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">				<span class="keyword">var</span> form = layui.form(),</span></span><br><span class="line">					layer = layui.layer,</span><br><span class="line">					layedit = layui.layedit,</span><br><span class="line">					laydate = layui.laydate,</span><br><span class="line">					laypage = layui.laypage;</span><br><span class="line">				</span><br><span class="line"><span class="actionscript">				<span class="keyword">var</span> nums = <span class="number">10</span>;</span></span><br><span class="line"><span class="actionscript">				<span class="comment">//调用分页</span></span></span><br><span class="line">				  laypage(&#123;</span><br><span class="line"><span class="actionscript">				    cont: <span class="string">'paged'</span></span></span><br><span class="line"><span class="actionscript">				    ,count: dataLength <span class="comment">//这个是后台返回的数据的总条数</span></span></span><br><span class="line"><span class="actionscript">				    ,limit: limitAllAppoint   <span class="comment">//每页显示的数据的条数,layui会根据count，limit进行分页的计算</span></span></span><br><span class="line">				    ,curr: currentPageAllAppoint</span><br><span class="line"><span class="actionscript">				    ,skip: <span class="literal">true</span></span></span><br><span class="line"><span class="actionscript">				    ,jump: <span class="function"><span class="keyword">function</span><span class="params">(obj, first)</span></span>&#123;</span></span><br><span class="line">				    	</span><br><span class="line">				    	currentPageAllAppoint = obj.curr;</span><br><span class="line">				    	startAllAppoint = (obj.curr-1)*obj.limit;</span><br><span class="line"><span class="actionscript">				      <span class="comment">//document.getElementById('biuuu_city_list').innerHTML = render(obj, obj.curr);</span></span></span><br><span class="line"><span class="actionscript">				      <span class="keyword">if</span>(!first)&#123; <span class="comment">//一定要加此判断，否则初始时会无限刷新</span></span></span><br><span class="line"><span class="actionscript">				      getShopCustomerManagePageInfo();<span class="comment">//一定要把翻页的ajax请求放到这里，不然会请求两次。</span></span></span><br><span class="line"><span class="actionscript">				          <span class="comment">//location.href = '?page='+obj.curr;</span></span></span><br><span class="line">				        &#125;</span><br><span class="line">				    &#125;</span><br><span class="line">				  &#125;);</span><br><span class="line">				</span><br><span class="line">				</span><br><span class="line">			&#125;);</span><br><span class="line">	   	&#125;;</span><br><span class="line">	   	</span><br><span class="line">   	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"admin-main"</span>&gt;</span></span><br><span class="line">	</span><br><span class="line">	</span><br><span class="line">				<span class="tag">&lt;<span class="name">blockquote</span> <span class="attr">class</span>=<span class="string">"layui-elem-quote"</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">form</span> <span class="attr">class</span>=<span class="string">"layui-form"</span> <span class="attr">action</span>=<span class="string">""</span> &gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"layui-form-item"</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"layui-input-inline"</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">id</span>=<span class="string">"selectValue"</span> <span class="attr">lay-verify</span>=<span class="string">"required"</span> <span class="attr">placeholder</span>=<span class="string">"客户姓名，电话"</span> <span class="attr">autocomplete</span>=<span class="string">"off"</span> <span class="attr">class</span>=<span class="string">"layui-input"</span>&gt;</span></span><br><span class="line">			    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			    <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">"layui-btn"</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">id</span>=<span class="string">"selectButton"</span>&gt;</span>搜索<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"shop_customer_manager_page_info"</span>&gt;</span>显示所有客户<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">blockquote</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">fieldset</span> <span class="attr">class</span>=<span class="string">"layui-elem-field"</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">legend</span>&gt;</span>客户列表<span class="tag">&lt;/<span class="name">legend</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"layui-field-box layui-form"</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">table</span> <span class="attr">class</span>=<span class="string">"layui-table admin-table"</span> <span class="attr">id</span>=<span class="string">"t_customerInfo"</span>&gt;</span></span><br><span class="line">							</span><br><span class="line">						<span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">fieldset</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"admin-table-page"</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"paged"</span> <span class="attr">class</span>=<span class="string">"page"</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	</span><br><span class="line">   </span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="java代码："><a href="#java代码：" class="headerlink" title="java代码："></a>java代码：</h3><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">	 * shop 客户管理 list</span></span><br><span class="line"><span class="comment">	 * <span class="doctag">@param</span> start</span></span><br><span class="line"><span class="comment">	 * <span class="doctag">@param</span> limit</span></span><br><span class="line"><span class="comment">	 * <span class="doctag">@param</span> selectValue</span></span><br><span class="line"><span class="comment">	 */</span></span><br><span class="line">	<span class="meta">@ResponseBody</span></span><br><span class="line">	<span class="meta">@RequestMapping</span>(<span class="string">"/list_shop_customers_info"</span>)</span><br><span class="line">	<span class="function"><span class="keyword">public</span> Object <span class="title">listShopCustomerInfo</span><span class="params">(Integer start, Integer limit, String selectValue)</span> </span>&#123;</span><br><span class="line">		Page page = <span class="keyword">new</span> Page();</span><br><span class="line">		page.setStart(start);</span><br><span class="line">		page.setLimit(limit);</span><br><span class="line">		<span class="comment">// 获取session中的用户信息</span></span><br><span class="line">		User u = (User) <span class="keyword">this</span>.request.getSession().getAttribute(<span class="string">"userInfo"</span>);</span><br><span class="line">		<span class="comment">// 获取持久化用户对象</span></span><br><span class="line">		User user = userService.findById(u.getUserId());</span><br><span class="line">		<span class="keyword">if</span> (user != <span class="keyword">null</span>) &#123;</span><br><span class="line">			projectCustomerService.findShopCustomersByUser(user, selectValue, page);</span><br><span class="line">			<span class="keyword">return</span> page;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br></pre></td></tr></table></figure>

<h3 id="sevice层"><a href="#sevice层" class="headerlink" title="sevice层"></a>sevice层</h3><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">@Override</span></span><br><span class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">findShopCustomersByUser</span><span class="params">(User user, String selectValue, Page page)</span> </span>&#123;</span><br><span class="line">		List cmList = <span class="keyword">new</span> ArrayList&lt;&gt;();</span><br><span class="line">		<span class="keyword">int</span> total = <span class="number">0</span>;</span><br><span class="line">		<span class="keyword">if</span>(user!=<span class="keyword">null</span> &amp;&amp; user.getParentId()!=<span class="keyword">null</span> &amp;&amp; !user.getParentId().equals(<span class="string">""</span>))&#123;</span><br><span class="line">			String hql = <span class="string">"from ShopCustomers as model where model.shopId = "</span> + Integer.parseInt(user.getParentId());</span><br><span class="line">			<span class="keyword">if</span>(selectValue!=<span class="keyword">null</span> &amp;&amp; !selectValue.equals(<span class="string">""</span>))&#123;</span><br><span class="line">				hql+=<span class="string">"and model.shopCustomerName like '%"</span> +selectValue+<span class="string">"%' or model.shopCustomerPhone like '%"</span> +selectValue+<span class="string">"%'"</span>;</span><br><span class="line">			&#125;</span><br><span class="line">			List&lt;ShopCustomers&gt; list = baseDao.findByHql(hql,page.getStart(),page.getLimit());</span><br><span class="line">			<span class="keyword">for</span>(ShopCustomers sc : list)&#123;</span><br><span class="line">				User u = (User) baseDao.loadById(User.class, sc.getUserId());</span><br><span class="line">				String cGRSHql = <span class="string">"select count(*) from GuideRecords where shopCustomerId = '"</span>+sc.getShopCustomerId()+<span class="string">"'"</span>;</span><br><span class="line">				String cDealHql = <span class="string">"select count(*) from GuideRecords where shopCustomerId = '"</span>+sc.getShopCustomerId()+<span class="string">"' and isDeal = 1"</span>;</span><br><span class="line">				<span class="keyword">int</span> floorCounts = baseDao.countQuery(cGRSHql);<span class="comment">//备案楼盘数</span></span><br><span class="line">				<span class="keyword">int</span> dealCounts = baseDao.countQuery(cDealHql);<span class="comment">//已成交数</span></span><br><span class="line">				CustomerManager cm = <span class="keyword">new</span> CustomerManager();</span><br><span class="line">				CustomerManager cmObj = cm.createCusManObj(sc,u);</span><br><span class="line">				cmObj.setRecords(floorCounts);</span><br><span class="line">				cmObj.setAlreadyDeal(dealCounts);</span><br><span class="line">				cmList.add(cmObj);</span><br><span class="line">			&#125;</span><br><span class="line">			String cHql = <span class="string">"select count(*) "</span>+hql;</span><br><span class="line">			total = baseDao.countQuery(cHql);</span><br><span class="line">		&#125;</span><br><span class="line">		page.setRoot(cmList);</span><br><span class="line">		page.setTotal(total);</span><br><span class="line">	&#125;</span><br></pre></td></tr></table></figure>
<h3 id="分页对象"><a href="#分页对象" class="headerlink" title="分页对象"></a>分页对象</h3><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">package</span> com.sc.tradmaster.utils;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> java.util.List;</span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 分页对象</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@author</span> grl 2017-01-05</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">Page</span> </span>&#123;</span><br><span class="line">	<span class="comment">/** 总记录数 */</span></span><br><span class="line">	<span class="keyword">private</span> <span class="keyword">int</span> total;</span><br><span class="line">	<span class="comment">/** 分页结果 */</span></span><br><span class="line">	<span class="keyword">private</span> List root;</span><br><span class="line">	<span class="comment">/** 开始页码 */</span></span><br><span class="line">	<span class="keyword">private</span> <span class="keyword">int</span> start;</span><br><span class="line">	<span class="comment">/** 每页多少 */</span></span><br><span class="line">	<span class="keyword">private</span> <span class="keyword">int</span> limit;</span><br><span class="line">	<span class="comment">/** 查询条件 */</span></span><br><span class="line">	<span class="keyword">private</span> String wheres;</span><br><span class="line">	</span><br><span class="line">	<span class="keyword">private</span> <span class="keyword">int</span> currentPage;	<span class="comment">//当前页</span></span><br><span class="line">	<span class="keyword">private</span> <span class="keyword">int</span> currentResult;	<span class="comment">//当前记录起始索引</span></span><br><span class="line">	<span class="keyword">private</span> <span class="keyword">int</span> totalPage;		<span class="comment">//总页数</span></span><br><span class="line"></span><br><span class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">int</span> <span class="title">getCurrentPage</span><span class="params">()</span> </span>&#123;</span><br><span class="line">		<span class="keyword">if</span>(currentPage&lt;=<span class="number">0</span>)</span><br><span class="line">			currentPage = <span class="number">1</span>;</span><br><span class="line">		<span class="keyword">return</span> currentPage;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setCurrentPage</span><span class="params">(<span class="keyword">int</span> currentPage)</span> </span>&#123;</span><br><span class="line">		<span class="keyword">this</span>.currentPage = currentPage;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">int</span> <span class="title">getCurrentResult</span><span class="params">()</span> </span>&#123;</span><br><span class="line">		currentResult = (getCurrentPage()-<span class="number">1</span>)*getLimit();</span><br><span class="line">		<span class="keyword">if</span>(currentResult&lt;<span class="number">0</span>)</span><br><span class="line">			currentResult = <span class="number">0</span>;</span><br><span class="line">		<span class="keyword">return</span> currentResult;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setCurrentResult</span><span class="params">(<span class="keyword">int</span> currentResult)</span> </span>&#123;</span><br><span class="line">		<span class="keyword">this</span>.currentResult = currentResult;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">int</span> <span class="title">getTotalPage</span><span class="params">()</span> </span>&#123;</span><br><span class="line">		<span class="keyword">if</span>(total%limit==<span class="number">0</span>)</span><br><span class="line">			totalPage = total/limit;</span><br><span class="line">		<span class="keyword">else</span></span><br><span class="line">			totalPage = total/limit+<span class="number">1</span>;</span><br><span class="line">		<span class="keyword">return</span> totalPage;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setTotalPage</span><span class="params">(<span class="keyword">int</span> totalPage)</span> </span>&#123;</span><br><span class="line">		<span class="keyword">this</span>.totalPage = totalPage;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">int</span> <span class="title">getTotal</span><span class="params">()</span> </span>&#123;</span><br><span class="line">		<span class="keyword">return</span> total;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setTotal</span><span class="params">(<span class="keyword">int</span> total)</span> </span>&#123;</span><br><span class="line">		<span class="keyword">this</span>.total = total;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="function"><span class="keyword">public</span> List <span class="title">getRoot</span><span class="params">()</span> </span>&#123;</span><br><span class="line">		<span class="keyword">return</span> root;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setRoot</span><span class="params">(List root)</span> </span>&#123;</span><br><span class="line">		<span class="keyword">this</span>.root = root;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">int</span> <span class="title">getStart</span><span class="params">()</span> </span>&#123;</span><br><span class="line">		<span class="keyword">return</span> start;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setStart</span><span class="params">(<span class="keyword">int</span> start)</span> </span>&#123;</span><br><span class="line">		<span class="keyword">this</span>.start = start;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">int</span> <span class="title">getLimit</span><span class="params">()</span> </span>&#123;</span><br><span class="line">		<span class="keyword">return</span> limit;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setLimit</span><span class="params">(<span class="keyword">int</span> limit)</span> </span>&#123;</span><br><span class="line">		<span class="keyword">this</span>.limit = limit;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="function"><span class="keyword">public</span> String <span class="title">getWheres</span><span class="params">()</span> </span>&#123;</span><br><span class="line">		<span class="keyword">return</span> wheres;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setWheres</span><span class="params">(String wheres)</span> </span>&#123;</span><br><span class="line">		<span class="keyword">this</span>.wheres = wheres;</span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line">	<span class="meta">@Override</span></span><br><span class="line">	<span class="function"><span class="keyword">public</span> String <span class="title">toString</span><span class="params">()</span> </span>&#123;</span><br><span class="line">		<span class="keyword">return</span> start+<span class="string">" "</span>+total +<span class="string">" "</span> +root;</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<p>如果遇到问题请联系我</p>

            <!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
            <audio id="audio" loop="1" preload="auto" controls="controls" data-autoplay="false">
                <source type="audio/mpeg" src="">
            </audio>
            
                <ul id="audio-list" style="display:none">
                    
                        
                            <li title='0' data-url='https://raw.githubusercontent.com/WinterChenS/imgrpo/master/mp3/%E6%96%B0%E8%A3%A4%E5%AD%90-%E7%94%9F%E6%B4%BB%E5%9B%A0%E4%BD%A0%E8%80%8C%E7%81%AB%E7%83%AD.mp3'></li>
                        
                    
                </ul>
            
        </div>
        
    <div id='gitalk-container' class="comment link"
		data-enable='false'
        data-ae='false'
        data-ci='77f2adc33e0112d086d7'
        data-cs='e926aa3a621556609b2c2b76d89320fa524e23cd'
        data-r='WinterChenS.github.io'
        data-o='WinterChenS'
        data-a='WinterChenS'
        data-d='false'
    >查看评论</div>


    </div>
    
</div>


    </div>
</div>
</body>


<script src="//lib.baomitu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="/js/plugin.js"></script>
<script src="/js/typed.js"></script>
<script src="/js/diaspora.js"></script>


<link rel="stylesheet" href="/photoswipe/photoswipe.css">
<link rel="stylesheet" href="/photoswipe/default-skin/default-skin.css">


<script src="/photoswipe/photoswipe.min.js"></script>
<script src="/photoswipe/photoswipe-ui-default.min.js"></script>


<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>
    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">
        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <!--  Controls are self-explanatory. Order can be changed. -->
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>





<!-- Google Analytics -->
<script type="text/javascript">
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'G-30C04D6TMS', 'auto');
  ga('send', 'pageview');
</script>
<!-- End Google Analytics -->


</html>
